<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height: 41px">
            <div class="report_header_date">
              <queryDate @queryDateClick='queryDateClick'></queryDate>
            </div>
            <div class="report_header_query">
              <queryMember @queryMemberClick="queryMemberClick"></queryMember>
            </div>
            <div class="report_header_query">
              <el-select v-model="query.flowType" clearable placeholder="请选择基金类型">
                <el-option
                  v-for="item in fundData"
                  :key="item.vipType"
                  :label="item.vipName"
                  :value="item.vipType">
                </el-option>
              </el-select>
            </div>
            <div class="report_header_query">
              <el-select v-model="query.type" clearable placeholder="请选择类型">
                <el-option
                  v-for="item in typeForm"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="loadFund">查询
          </el-button>
          <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
        </div>
      </el-header>
      <el-main>
        <el-table :height="curHeight" :data="tableData" border style="width: 100%;">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" header-align="center" :show-overflow-tooltip="true"
                           width="200">
            <template slot-scope="scope">{{ scope.row.createDate | dateFormatter }}</template>
          </el-table-column>
          <el-table-column prop="credit" align="right" label="收入" header-align="center" :show-overflow-tooltip="true" width="150">
          </el-table-column>
          <el-table-column prop="debit" align="right" width="150" header-align="center" :show-overflow-tooltip="true" label="支出">
          </el-table-column>
          <el-table-column align="right" prop="balance" header-align="center" width="150" label="余额">
          </el-table-column>
          <el-table-column align="center" prop="flowType" label="基金类型" header-align="center" width="150">
            <template slot-scope="scope">{{watchVipType(scope.row.flowType)}}</template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="类型" header-align="center" width="80">
            <template slot-scope="scope">{{ scope.row.type | watchType }}</template>
          </el-table-column>
          <el-table-column align="left" prop="memo" header-align="center" label="描述">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadFund"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { EventBus } from '@/api/eventBus'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import permission from '@/directive/permission/index.js' // 权限判断指令
import loadMore from '@/utils/loadMore.js'
import { list } from '../../api/foundationFlow'
import { list as vipList } from '../../api/vip'
import { getInfo, update } from '../../api/fund'
import Pagination from '@/components/Pagination'
import utils from '@/utils/utils'
import filters from '@/filters/index'
import queryDate from '@/components/Query/queryDate'
import queryMember from '@/components/Query/queryMember'
import { warehouseProductList, warehouseSummary } from '@/api/report'
import ExportList2Excel from '@/components/ExportList2Excel'
export default {
  directives: { elDragDialog, permission, loadMore },
  name: 'fund-view',
  activated() {

  },
  data() {
    return {
      curHeight: null,
      flowType: '',
      pageSize: 20,
      total: 0,
      pageNum: 1,
      tableData: [],
      query: {
        endDate: '',
        beginDate: '',
        memberId: '',
        flowType: '',
        type: ''
      },
      typeForm: [
        {
          value: '1',
          label: '收入'
        }, {
          value: '2',
          label: '分红'
        }
      ],
      fundData: []
    }
  },
  watch: { // 只要路由发生变化就重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal)
      if (newVal.name == 'fund-view' && newVal.query.id != this.query.flowType) {
        this.query.flowType = newVal.query.flowType
        this.loadFund()
      }
    }
  },
  created() {
    this.query.flowType = this.$route.query.flowType
    console.log(this.$route.query.flowType)
    this.loadVip()
    this.loadFund()
  },
  filters: {
    watchType(val){
      if (val == 0){
        return '收入'
      }else if(val == 1){
        return '分红'
      }
    }
  },
  components: { Pagination, queryDate, queryMember, ExportList2Excel },
  mounted() {
    this.beforeMount()
    this.comeIn()
  },
  methods: {
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 266//减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 220//减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 220// 减去页面上固定高度height
    },
    loadFund() {
      var _this = this
      let params = new URLSearchParams()
      params.append('pageSize', this.pageSize)
      params.append('pageNum', this.pageNum)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('flowType', this.query.flowType)
      params.append('memberId', this.query.memberId)
      params.append('type', this.query.type)
      list(params).then(res => {
        console.log(res)
          res.data.data.forEach((item) => {
            item.credit = item.credit /100
              item.debit = item.debit /100
              item.balance = item.balance /100
          }
          )
        this.tableData = res.data.data
        _this.total = res.data.total
      })
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryMemberClick(data) {
      this.query.memberId = data.memberId
    },
    loadVip() {
      var _this = this
      let params = new URLSearchParams()
      vipList(params).then(response => {
        console.log(response)
        console.log(this.fundForm)
        _this.fundData = [{
          vipName: '分红基金',
          vipType: '6'
        }, {
          vipName: '活动基金',
          vipType: '7'
        }, {
          vipName: '股份基金',
          vipType: '8'
        }]
        response.data.data.forEach(function(item) {
          if (item.vip == 1) {
            var data = {
              vipName: item.name,
              vipType: '1'
            }
            console.log(data)
            _this.fundData.push(data)
          }
          if (item.vip == 2) {
            var data = {
              vipName: item.name,
              vipType: '2'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 3) {
            var data = {
              vipName: item.name,
              vipType: '3'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 4) {
            var data = {
              vipName: item.name,
              vipType: '4'
            }
            _this.fundData.push(data)
          }
          if (item.vip == 5) {
            var data = {
              vipName: item.name,
              vipType: '5'
            }
            _this.fundData.push(data)
          }
        })
        _this.fundData = _this.fundData.reverse()
        console.log(this.fundData)
      }).catch(error => {
        console.log('error!!')
      })
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ['创建时间', '收入', '支出', '余额', '基金类型', '类型', '描述']
      data.filterVal = ['createDate', 'credit', 'debit', 'balance', 'flowType', 'type', 'memo']
      data.filename = '销售出库列表'
      const params = new URLSearchParams()
      params.append('pageSize', 10000)
      params.append('pageNum', 1)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('flowType', this.query.flowType)
      params.append('memberId', this.query.memberId)
      params.append('type', this.query.type)
      list(params).then(res => {
        res.data.data.forEach(function(item){
          item.createDate = _this.watchDate(item.createDate)
          item.flowType = _this.watchVipType(item.flowType)
          if (item.type == 0) {
            item.type = '收入'
          }else {
            item.type = '分红'
          }
        })
        data.list = res.data.data
        _this.$refs.exportList2Excel.handleDownload(data)
        loading.close()
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close()
        console.log('error!!')
      })
      _this.$refs.exportList2Excel.handleDownload(data)
    },
    watchVipType(val){
      var typeTitle = ''
      this.fundData.forEach(function(item){
        if (val == item.vipType){
          typeTitle = item.vipName
        }
      })
      return typeTitle
    },
    watchDate(date){
      if (date==null) {
        return null;
      }
      console.log('111111')
      date = new Date(date)
      let fmt = "YYYY-mm-dd"
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString()            // 日
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    }
  }
}
</script>

<style scoped>
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  height: 100% !important;
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 10px;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
  margin-top: 5px;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
  margin-top: 5px;
}

.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
